.mitm-rule-drawer {
    :global {
        .ant-drawer-body {
            padding: 0;
            overflow: hidden;
        }
    }
}

.heard-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--Colors-Use-Neutral-Text-1-Title);
    height: 20px;
    line-height: 20px;
}

.header {
    display: flex;
    justify-content: space-between;
    padding: 0 16px;
}
.heard-right-operation {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;

    .button-text:first-child {
        margin-right: 0;
    }

    .button-export {
        font-size: 12px;
    }

    .button-save {
        font-size: 12px;
    }

    .button-question {
        padding: 4px;
    }

    .icon-question {
        color: var(--Colors-Use-Neutral-Text-1-Title);

        :hover {
            color: var(--Colors-Use-Main-Hover);
        }
    }

    .icon-remove {
        color: var(--Colors-Use-Neutral-Disable);
        width: 16px;
        height: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        svg {
            width: 16px;
            height: 16px;
        }

        :hover {
            color: var(--Colors-Use-Main-Hover);
        }
    }

    .heard-right-operation_divider{
        margin: 0 4px;
    }
}

.mitm-rule-table {
    height: 100%;
    padding: 0px 16px 16px;

    .table-title-body {
        display: flex;
        align-items: center;
        height: 24px;
        font-size: 12px;

        .table-title {
            font-weight: 600;
            font-size: 12px;
            color: var(--Colors-Use-Neutral-Text-1-Title);
            margin-right: 12px;
        }

        .table-total {
            font-weight: 400;
            font-size: 12px;
            color: var(--Colors-Use-Neutral-Disable);

            span {
                color: var(--Colors-Use-Main-Primary);
            }
        }

        .table-search {
            margin-right: 8px;
        }

        .table-switch {
            display: flex;
            align-items: center;

            .switch-text {
                margin-right: 4px;
            }
        }

        .button-batch-remove {
            margin-left: 8px;
            margin-right: 8px;
        }

        .button-add-rule {
            display: flex;
            align-items: center;
            font-weight: 500;
            font-size: 12px;

            svg {
                color: var(--Colors-Use-Main-On-Primary);
                margin-right: 4px;
                stroke-width: 1.5px;
            }
        }

        .button-filter {
            padding: 4px;
            margin-left: 16px;

            svg {
                color: var(--Colors-Use-Neutral-Text-1-Title);
            }

            &:hover {
                svg {
                    color: var(--Colors-Use-Main-Primary);
                }
            }
        }
    }

    .table-action-icon {
        padding: 0 4px;
        display: flex;
        align-items: center;

        .action-icon {
            svg {
                &:hover {
                    color: var(--Colors-Use-Main-Primary);
                }
            }
        }

        .action-icon-edit-disabled {
            svg {
                color: var(--Colors-Use-Neutral-Disable);
                cursor: not-allowed;

                &:hover {
                    color: var(--Colors-Use-Neutral-Disable);
                }
            }
        }

        .action-icon-ban-disabled {
            svg {
                color: var(--Colors-Use-Main-Primary);
            }
        }

        span {
            padding: 0 12px;
            border-right: 1px solid var(--Colors-Use-Neutral-Border);
            color: var(--Colors-Use-Neutral-Text-3-Secondary);

            &:first-child {
                padding-left: 0;
            }
        }

        .icon-trash {
            color: var(--Colors-Use-Error-Primary);
        }
    }

    .table-result {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .table-result-text {
            max-width: 80%;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
            word-break: break-all;
        }
    }

    .table-result-extra {
        font-weight: 400;
        font-size: 12px;
        color: var(--Colors-Use-Neutral-Text-1-Title);
        vertical-align: middle;
    }
}

.table-hit-color-content {
    display: flex;
    align-items: center;
    height: 100%;

    .table-hit-color {
        height: 8px;
        width: 8px;
        border-radius: 50%;
        margin-right: 8px;
    }
}

.popover-remove {
    padding-top: 6px;

    :global {
        .ant-popover-inner-content {
            padding: 6px 4px 8px;
        }
    }
}

.question-tooltip {
    :global {
        .ant-tooltip-arrow {
            left: 35%;
        }
    }
}
